<template>
  <div>
    <h1 style="text-align: center;color: red">购物车信息</h1>
    <table style="margin-top: 20px">
      <tr>
        <td>商品编号：</td>
        <td><input type="text" v-model.number="book.id"></td>
      </tr>
      <tr>
        <td>商品标题：</td>
        <td><input type="text" v-model.number="book.title"></td>
      </tr>
      <tr>
        <td>商品价格：</td>
        <td><input type="text" v-model.number="book.price"></td>
      </tr>
      <tr>
        <td>商品数量：</td>
        <td><input type="text" v-model.number="book.count"></td>
      </tr>
      <tr>
        <td colspan="2">
          <button @click="addCarts">添加购物车</button>
        </td>
      </tr>
    </table>
    <hr>
    <table>
      <thead>
      <tr>
        <th>编号</th>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(book,index) in books" :key="book.id">
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.price }}</td>
        <td>
          <button @click="add(index)">+</button>
          {{ book.count }}
          <button @click="minus(index)">-</button>
        </td>
        <td>{{ book.count * book.price }}</td>
        <td>
          <button @click="delbook(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div>总价：{{totalPrice}}</div>
  </div>
</template>

<script>

import {mapMutations,mapState} from "vuex"

export default {
  name: "index",
  data() {
    return {
      book: {
        id: "",
        title: "",
        price: "",
        count: 1
      }
    }
  },

  // 获取状态管理的数据
  // 1、原始写法
  // computed: {
  //   books() {
  //     return this.$store.state.items;
  //   }
  // },

  // 2、数组写法 - 占用式
  // computed: mapState(['items']),

  // 3、对象写法1 - 占用式
  // computed: mapState({books : "items"}),
  // 3、对象写法2 - 占用式
  // computed: mapState({
  //   books(state){
  //     return state.items;
  //   }
  // }),

  // 4、解构写法
  computed:{
    // 数组写法
    // ...mapState(["items"])
    // 对象写法
    // ...mapState({books:"items"})
    ...mapState({
      books(state){
        return state.items;
      }
    }),

    totalPrice(){
      return this.books.reduce((total,item)=>{
        return total + item.price * item.count
      },0)
    }
  },


  // methods: {
  //   // 1、原始写法, 没问题
  //   // addCarts() {
  //   //   this.$store.commit("putItemCarts",this.book);
  //   // },
  //
  //   minus(index) {
  //     this.books[index].count--;
  //   },
  //   add(index) {
  //      this.books[index].count++;
  //   },
  //   delbook(index){
  //     this.$store.state.items.splice(index,1)
  //   }
  //
  // }

  // 2、数组写法 - 占用式写法
  // 好处：解决你方法名字定义的问题，可以共享名字
  // 坏处：传参过程中只能在调用的过程中去传递参数，不能有任何的逻辑
  // methods:mapMutations(['putItemCarts'])

  // 3、对象写法 - 占用式写法
  // 好处：可以自定义名字,还可以用行为去处理，只不过参数就是commit直接提交了。
  // 坏处：传参过程中只能在调用的过程中去传递参数，不能有任何的逻辑
  // methods:mapMutations({
  //   addCarts: "putItemCarts"
  // })
  // methods:mapMutations({
  //   addCarts(conmit){
  //     conmit('putItemCarts',this.book)
  //   }
  // })

  // 4、解构写法
  methods: {
    // 数组方式 , 最后底层都会转换成：this.$store.commit("putItemCarts",this.book);
    // ...mapMutations(["putItemCarts"])

    // 对象方式 1 , 最后底层都会转换成：this.$store.commit("putItemCarts",this.book);
    // ...mapMutations({
    //   addCarts: "putItemCarts"
    // }),
    ...mapMutations({
      addCarts(commit) {
        commit("putItemCarts", this.book);
      }
    })

  }

}
</script>

<style scoped>
.pug-ui-content table {
  width: 100%;
  border-collapse: collapse;
}

.pug-ui-content tr th, .pug-ui-content tr td {
  border: 1px solid #ccc;
  padding: 8px;
}
</style>